<template>
  <div class="merak-container-has-aside" curPageName="7dsfds53122346893">
    <div class="merak-card merak-container-has-search" v-waterMarker>
      <div>
        <searchBar
          :close-plan="true"
          ref="searchbarRef"
          :placeholder="$t('marking_pending_application.merchant_name')"
          :close-advanced="true"
          :search_val="search_val"
          @search-event="searchBarPost"
        >
          <template #footer>
            <!-- <el-button v-auth="{ authArr: authArr, key: 'mergeadd' }" type="primary" @click="addmerge_btn_open()">
              {{ $t("goods_allocation_merge.add_merge") }}
            </el-button> -->
          </template>
        </searchBar>
      </div>
      <div class="merak-table-wrapper">
        <MerakXTable
          ref="tableRef"
          v-bind="tableState"
          :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
          :query-columns="handleQueryColumns"
          :query-data="handleQueryData"
          :params="state.params"
          :column-min-width="120"
          :handles="tableState.handles"
          :data="state.data"
          :batch-click="handleBatchClick"
          :batches="[{ text: '', color: 'green', type: 'shareauth' }]"
          :await-params="false"
          :handler-click="handleHandlerClick"
          :enabled-editor-by-auth="tableEditorAuth"
          @editor-click="handleEditorClick"
        >
          <template #custom_handle="{ row }">
            <!-- v-auth="{ authArr: authArr, key: 'mergeCard' }" -->
            <el-button type="primary" link @click="open_detail(row)">
              {{ $t("merak.detail") }}
            </el-button>
          </template>
          <template #unchecked_product_num="{ row }">
         
          
              <span style="color:var(--el-color-danger);" v-if="row.unchecked_product_num>0">{{row.unchecked_product_num}}</span>
              <span v-else>{{row.unchecked_product_num}}</span>
           </template>
        </MerakXTable>
      </div>
    </div>
    <!-- 查看详情start -->

    <Transition name="fade" mode="out-in">
      <showDetail :key="timestampKey" v-if="addmerge_btn" :rowData="rowData" @close="refresh => handleClose(refresh)" />
    </Transition>

    <div>
      <el-dialog destroy-on-close v-model="edit_model" :width="500" align-center append-to-body>
        <template #header>
          <div class="editor-title">{{ $t("merak.edit") }}「{{ $t(`goods_allocation_merge.${edit_modal_arr.curField}`) }}」</div>
        </template>
        <el-form ref="formRef" label-position="top" :model="edit_modal_arr">
          <el-input v-model="edit_modal_arr.curval" class="qf_input" />
        </el-form>
        <template #footer>
          <el-button @click="edit_model = false">{{ $t("merak.cancel") }}</el-button>
          <el-button :disabled="edit_disabled" :loading="edit_loading" type="primary" @click="tdSave(edit_modal_arr)">{{
            $t("merak.confirm")
          }}</el-button>
        </template>
      </el-dialog>

      <!-- 客服审核 -->
      <el-dialog destroy-on-close v-model="audit_model" :width="500" align-center append-to-body>
        <template #header>
          <div class="editor-title">{{ $t("marking_pending_application.customer_service_audit") }}</div>
        </template>
        <el-form ref="auditRef" label-position="top" :model="auditForm" :rules="auditRules">
          <el-form-item :label="$t('marking_pending_application.label_unit_price')" prop="price_km">
            <el-input v-num.point v-model="auditForm.price_km" class="qf_input" />
          </el-form-item>

          <!-- 币种 -->
          <el-form-item :label="$t('marking_pending_application.currency')">
            <el-radio-group class="qf_input" v-model="auditForm.curr_price_km" prop="curr_price_km">
              <el-radio :label="4">CNY</el-radio>
              <el-radio :label="1">RUB</el-radio>
              <el-radio :label="2">USD</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 贴标工厂 -->
          <el-form-item :label="$t('marking_pending_application.labeling_factory')">
            <el-select class="qf_select" v-model="auditForm.pay_factory_id" filterable>
              <el-option :label="item.label" :value="item.value" v-for="item in dataFactory" :key="item" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="audit_model = false">{{ $t("merak.cancel") }}</el-button>
          <el-button :loading="audit_loading" type="primary" @click="auditSave(auditForm, auditRef)">{{
            $t("merak.confirm")
          }}</el-button>
        </template>
      </el-dialog>

      <!-- 创建申请单 -->
      <el-dialog destroy-on-close v-model="application_model" :width="500" align-center append-to-body>
        <template #header>
          <div class="editor-title">{{ $t("marking_pending_application.create_application_form") }}</div>
        </template>
        <el-form ref="applicationRef" label-position="top" :model="applicationForm" :rules="applicationRules">
          <el-form-item label="">
            <el-radio-group class="qf_input" v-model="applicationForm.is_own" @change="getCompanyFun(applicationForm.is_own)">
              <el-radio :label="1"> {{ $t("marking_pending_application.own") }}</el-radio>
              <el-radio :label="2"> {{ $t("marking_pending_application.other") }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="">
            <el-select :placeholder="$t('marking_pending_application.choose_corporation') " class="qf_select" v-model="applicationForm.import_company_id" filterable>
              <el-option :label="item.label" :value="item.value" v-for="item in dataCompany" :key="item" />
            </el-select>
          </el-form-item>

          <el-form-item label="">
            <el-input placeholder="备注" class="qf_input" v-model="applicationForm.remark" :rows="4" type="textarea" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="application_model = false">{{ $t("merak.cancel") }}</el-button>
          <el-button :loading="application_loading" type="primary" @click="applicationSave(applicationForm, applicationRef)">{{
            $t("merak.confirm")
          }}</el-button>
        </template>
      </el-dialog>
    </div>
    <!-- 查看详情end -->
  </div>
</template>

<script lang="ts" setup name="mergeStats">
import useDateFormat from "@/hooks/useDateFormat";
import showDetail from "./showDetail.vue";

import { Plus, Edit, Delete, EditPen, Search } from "@element-plus/icons-vue";
import { useDefaultStore } from "@/stores/modules/default";
import { ref, reactive, onMounted, getCurrentInstance, computed } from "vue";

import EmptyPng from "@/assets/images/empty.png";
import searchBar from "@/components/SearchBar";
import merakColapse from "@/components/merakColapse/index.vue";
import selectedParams from "@/components/SearchBar/components/selectedParams.vue";
import { exportTableApi } from "@/api/modules/table";
import { useRoute, useRouter } from "vue-router";

import MerakXTable, {
  MerakXTableInstance,
  MerakXTableColumn,
  MerakXTableProps,
  MerakXTableQuery
} from "@/components/MerakXTable";

import {
  getLeftApi,
  getmergeDataApi,
  getmergfieldApi,
  updatamergfieldApi,
  gatEnmuApi,
  mergePropdelete
} from "@/api/modules/goodsArchive/allocation";

import {
  getDataApi,
  getfieldApi,
  updatafieldApi,
  propdelete,
  propaudit,
  getCompany,
  createApply,
  getFactory
} from "@/api/modules/markingManagement/applicationFrom";

import {
  moreConfirm,
  confirmWarningMsg,
  successMsg,
  warnMsg,
  failMsg,
  confirmSuccessMsg,
  delConfimMsg
} from "@/utils/messageUtils";
import { useGlobalStore } from "@/stores/modules/global";

import treeNode from "@/views/personalManagement/a-components/oragnizationTree/index.vue";
import { getLocationParams } from "@/utils/index";

import type { ElForm } from "element-plus";
import I18n from "@/languages/index";
import { watch } from "vue";

const $t = I18n.global.t;

const lang = ref("");
lang.value = $t("lang");
const columnTypeArr = ref([{ type: "handle", width: lang == "ru" ? 300 : 200, slot: "custom_handle" }]);
const route = useRoute();
const router = useRouter();

const defaultStore = useDefaultStore();
const edit_disabled = ref(false);
const edit_loading = ref(false);

const { format } = useDateFormat();
type FormInstance = InstanceType<typeof ElForm>;
const leavesRef = ref<FormInstance>();

const { proxy } = getCurrentInstance();

const addmerge_btn = ref(false);
const cur_type = ref("");
const rowData = ref();
const timestampKey = ref("");

//   打开添加窗口
const open_detail = async row => {
  console.log(row);
  timestampKey.value = Date.now();
  console.log(timestampKey.value);
  rowData.value = row;
  addmerge_btn.value = true;
};

const tableRef = ref<MerakXTableInstance>();

//批量操作
const handleBatchClick = async e => {};

// 关闭添加页面
const handleClose = (refresh: boolean, typeId) => {
  console.log(typeId);

  if (refresh) {
    tableRef.value?.reloadData();
  }
  addmerge_btn.value = false;
};

//#region 搜索表单
const search_val = ref("");
const searchFn = e => {
  console.log(e);
  // e.searchVal
  state.params.key_words = e.search;
};

const expandedKeys = ref([]);
const searchbarRef = ref();

const curlevel = ref(1);

//权限数据
let authArr = ref({});

//列表内容展示区
const handleQueryData: MerakXTableInstance["queryData"] = async ({ page, sorts, filters, from }) => {
  const params: Record<string, any> = {};
  if (!!page) {
    // if (curcheck_id.value[0].indexOf('-') > -1) {
    // 	var newarr = curcheck_id.value[0].split('-');
    // 	cur_type.value = newarr[1]

    // } else {
    // 	cur_type.value = curcheck_id.value[0];
    // }

    Object.assign(params, { ...page, type_id: cur_type.value, keyword: params.search });
  }
  // console.log(from)
  for (let key of Object.keys(from)) {
    if (!!from[key]) {
      params[key] = from[key];
    }
  }
  return await getDataApi(params).then(res => {
    // console.log(res)
    if (res.code == ResultEnum.SUCCESS) {
      let data = res.data;
      Object.assign(authArr, data.auth_list);

      // 权限02
      authArr.value = res.auth_list;
      edits_auth_fun();

      const { table_data, language } = data as { table_data: Record<string, any>; language: Record<string, any> };
      return table_data;
    }
  });
};

// 获取工厂
const dataFactory = ref();

const getFactoryFun = () => {
  getFactory({ supplier_id: propRowTwo.value.supplier_id }).then(({ code, message, data }) => {
    if (code == ResultEnum.SUCCESS) {
      dataFactory.value = data.list;
    } else {
      failMsg(message);
    }
  });
};

const showRemainingModal = ref(false);
const showRemainingData = ref([]);
const xqfrom = ref();
const xqloading = ref(false);
const xqtitle = ref();
const { language } = useGlobalStore();
const xq_merge_prop_id = ref("");
const xq_table_id = ref("");

// 单元格编辑保存
const tdSave = row => {
  edit_disabled.value = true;
  edit_loading.value = true;
  var postdata = edit_td_data.value;
  postdata["field"] = row.curField;
  postdata["value"] = row.curval;
  console.log(postdata);
  updatafieldApi(postdata).then(res => {
    edit_disabled.value = false;
    edit_loading.value = false;
    if (res.code == ResultEnum.SUCCESS) {
      edit_model.value = false;
      tableRef.value?.reloadData();
    } else {
      failMsg(res.message);
    }
  });
};

// 表格相关属性
// columnType: ['selection',{ type: "handle", width: 130, showHandleDropDown: true, slot: "custom_handle" }],

const tableState = reactive<MerakXTableProps>({
  columnsByStore: [],
  rowKey: "apply_log_id",
  columnType: [{ type: "handle", width: 130, showHandleDropDown: true, slot: "custom_handle" }],

  handles: [
    {
      type: "author_confirmed",
      text: "1: " + $t("marking_pending_application.author_confirmed_one"),
      disabled: row => {
        if (row.cstatus != 1) {
          return true;
        }
      }
    },
    {
      type: "audit_confirmed",
      text: "2: " + $t("marking_pending_application.customer_service_audit"),
      disabled: row => {
        if (row.cstatus != 2) {
          return true;
        }
      }
    },
    {
      type: "create_form",
      text: "3: " + $t("marking_pending_application.create_application_form"),
      disabled: row => {
        if (row.cstatus != 3) {
          return true;
        }
      }
    },
    {
      type: "delete",
      text: $t("merak.delete"),
      color: "red",
      disabled: row => {
        if (row.del_disabled == 0) {
          return true;
        }
      }
    }
  ]
});

// 操作列下拉选项点击事件
const handleHandlerClick: MerakXTableProps["handlerClick"] = async ({ type, params }) => {
  const propId = params.row?.[tableState.rowKey!];
  const propRow = params.row;
  var postdata = {
    type_id: ''+propRow.type_id,
    supplier_id: ''+propRow.supplier_id,
    brand_id: ''+propRow.brand_id,
    release_method_type: ''+propRow.release_method_type,
    deliver_date: ''+propRow.deliver_date,
    apply_order_type: ''+propRow.apply_order_type,
    comments: ''+propRow.comments,
    status: ''+propRow.status,
    source: ''+propRow.source
  };
  console.log("点点点 ");
  console.log(propId);
  // const typeId = params.row?.type_id_val;
  if (typeof propId === "undefined") return;
  console.log(params);
  switch (type) {
    case "author_confirmed":
      //open_application_model_fun(postdata)
      author_confirmed_fun(postdata);

      break;
    case "audit_confirmed":
      open_audit_model_fun(postdata);

      break;
    case "create_form":
    postdata["production_date"]=''+propRow.production_date;
    postdata["pay_factory_id"]=''+propRow.pay_factory_id;
    postdata["service"]=''+propRow.service;
    postdata["price_km"]=''+propRow.price_km;
    postdata["curr_price_km"]=''+propRow.curr_price_km;
    postdata["express_pdf"]=''+propRow.express_pdf;
    

      open_application_model_fun(postdata);

      break;
    case "delete":
      console.log("删除单条");
      delFun(propRow);
      break;
    default:
      break;
  }
};

// 第一步提交人审核
const author_confirmed_fun = postrow => {
  confirmWarningMsg({
    msg: $t("marking_pending_application.one_tip") ?? "",
    callback: (status: string) => {
      if (status === "confirm") {
        postrow["type"] = 1;
        propaudit(postrow).then(({ code, message }) => {
          if (code == ResultEnum.SUCCESS) {
            tableRef.value?.reloadData();
            successMsg($t("marking_pending_application.one_success"));
          } else {
            failMsg(message);
          }
        });
      }
    }
  });
};

// 第二步审核的表单
const audit_model = ref(false);
const auditForm = ref({ curr_price_km: 4 });
const auditRef = ref();
const audit_loading = ref(false);
const propRowTwo = ref();

const auditRules = {
  price_km: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
  curr_price_km: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }]
};
const open_audit_model_fun = propRow => {
  audit_model.value = true;
  propRowTwo.value = propRow;
  getFactoryFun();
  audit_loading.value = false;
  auditForm.value = {
    price_km: "",
    curr_price_km: 4,
    pay_factory_id: ""
  };
};

const auditSave = async (auditForm, auditRef) => {
  if (!auditRef) return;
  await auditRef.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      var postrow = propRowTwo.value;
      postrow["type"] = 2;
      postrow["price_km"] = ''+auditForm.price_km;
      postrow["curr_price_km"] = ''+auditForm.curr_price_km;
      postrow["pay_factory_id"] = ''+auditForm.pay_factory_id;
      audit_loading.value = true;
      propaudit(postrow).then(({ code, message }) => {
        audit_loading.value = false;
        if (code == ResultEnum.SUCCESS) {
          tableRef.value?.reloadData();
          successMsg($t("merak.action_success"));
          audit_model.value = false;
        } else {
          failMsg(message);
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 第三步创建申请单
const application_model = ref(false);
const applicationForm = ref({ is_own: 1 });
const applicationRef = ref();
const application_loading = ref(false);
const propRowThree = ref();

const applicationRules = {
  price_km: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
  curr_price_km: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }]
};
const open_application_model_fun = propRow => {
  application_model.value = true;
  propRowThree.value = propRow;
  console.log(propRow)
  application_loading.value = false;
  auditForm.value = {
    is_own: 1,
    import_company_id: "",
    remark: ""
  };
};

const applicationSave = async (applicationForm, applicationRef) => {
  if (!applicationRef) return;
  await applicationRef.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      var postrow = propRowThree.value;
      postrow["import_company_id"] = ''+applicationForm.import_company_id;
      if(!applicationForm.remark){
        applicationForm.remark=''

      }
      postrow["remark"] = ''+applicationForm.remark;
      console.log(postrow)
      application_loading.value = true;
      createApply(postrow).then(({ code, message }) => {
        application_loading.value = false;
        if (code == ResultEnum.SUCCESS) {
          tableRef.value?.reloadData();
          successMsg($t("merak.action_success"));
          application_model.value = false;
        } else {
          failMsg(message);
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

//删除

const delFun = propRow => {
  confirmWarningMsg({
    msg: $t("marking_pending_application.is_del") ?? "",
    callback: (status: string) => {
      if (status === "confirm") {
        var postdata = {
          type_id: propRow.type_id,
          supplier_id: propRow.supplier_id,
          brand_id: propRow.brand_id,
          release_method_type: propRow.release_method_type,
          deliver_date: propRow.deliver_date,
          apply_order_type: propRow.apply_order_type,
          comments: propRow.comments,
          status: propRow.status,
          source: propRow.source
        };

        propdelete(postdata).then(({ code, message }) => {
          if (code == ResultEnum.SUCCESS) {
            tableRef.value?.reloadData();
            successMsg($t("merak.delete_success"));
          } else {
            failMsg(message);
          }
        });
      }
    }
  });
};

//枚举值
const enumFun = (propId, row) => {
  var title = language === "zh" ? row?.merge_prop_cn : row?.merge_prop_ru;
  showRemaining(propId, title);
};

//表头信息
const handleQueryColumns: MerakXTableInstance["queryColumns"] = async () => {
  return await getfieldApi().then(res => {
    if (res.code == ResultEnum.SUCCESS) {
      let data = res.data as MerakXTableQuery.Columns;
      // 克隆表头数据作为列设置的对照数据
      tableState.columnsByStore = JSON.parse(JSON.stringify(data.columns));

      // return {
      // 	...data,
      // 	columns: [...data.columns].map(column => {
      // 	switch (column.field) {
      // 		case "merge_prop_id":
      // 		return { ...column, params: { editor: false } };

      // 		case "merge_prop_cn":
      // 		case "merge_prop_ru":

      // 		case "product_type":
      // 		return { ...column, params: { editor: false } };

      // 		case "qifa_prop_id":
      // 		return { ...column, params: { editor: false } };

      // 		case "qifa_prop":
      // 		return { ...column, params: { editor: false } };

      // 		case "qifa_prop_id":
      // 		return { ...column, params: { editor: false } };
      // 		case "cc_prop_id":
      // 		return { ...column, params: { editor: false } };

      // 		default:
      // 		return { ...column };
      // 	}
      // 	})
      // };

      data.columns.map(column_ever => {
        console.log(column_ever);
        if (column_ever.field == "comments") {
          column_ever["params"] = { editor: true };
        } else {
          column_ever["params"] = { editor: false };
        }

        if(column_ever.field=="unchecked_product_num"){

					
column_ever["slots"]={ default: `unchecked_product_num` }
}



      });
              


      console.log(data.columns);
      state.columns = data.columns;
      return data;
    }
  });
};

interface Tree {
  label: string;
  children?: Tree[];
}

const handleNodeClick = (data: Tree) => {
  console.log(data);
};
const defaultKey = ref(1);
const treedata: Tree[] = ref([]);

const defaultProps = {
  children: "children",
  label: "label"
};

const treeRef = ref();

const state = reactive<{
  params: Record<string, any>;
  columns: MerakXTableColumn[];
}>({
  params: {
    key_words: ""
  },
  columns: []
});

//触发了快速搜索或者搜索方案
const searchBarPost = params => {
  // console.log(params)

  let postParams = { ...params.params, keyword: params.search };
  state.params = postParams;
};

// 获取公司
const dataCompany = ref();
const getCompanyFun = typeCompany => {
  console.log(applicationForm);
  applicationForm.value.import_company_id = "";
  getCompany({ type: typeCompany }).then(({ code, message, data }) => {
    if (code == ResultEnum.SUCCESS) {
      dataCompany.value = data.list;
    } else {
      failMsg(message);
    }
  });
};

// 编辑表格
// 给予表格编辑权限
onMounted(async () => {
  // state.params = {};
  getCompanyFun("1");
});

const edit_model = ref(false);
const editForm = ref({
  aaa: "",
  bbb: ""
});
const tableEditorAuth = computed(() => {
  let flag = false;

  if (!!authArr.value?.edit?.show) {
    flag = true;
  }
  return flag;
});

const edits_auth_del_fun = (curval, data) => {
  var cureq = 0;
  for (let index = 0; index < data.length; index++) {
    const element = data[index];
    if (element.type == curval) {
      cureq = index;
    }
  }
  data.splice(cureq, 1);
};
// 权限修改审核
const edits_auth_fun = () => {
  if (!authArr.value.submitter.show) {
    edits_auth_del_fun("author_confirmed", tableState.handles);
  }
  if (!authArr.value.customer.show) {
    edits_auth_del_fun("audit_confirmed", tableState.handles);
  }
  if (!authArr.value.createApplication.show) {
    edits_auth_del_fun("create_form", tableState.handles);
  }
  if (!authArr.value.del.show) {
    edits_auth_del_fun("delete", tableState.handles);
  }
};

const edit_modal_arr = ref({ curField: "", curval: "", rowKey: "" });

const edit_td_data = ref();
// 表格编辑事件
const handleEditorClick: MerakXTableInstance["onEditor-click"] = params => {
  console.log(params);
  edit_model.value = true;
  edit_modal_arr.value.curField = params.field;
  edit_modal_arr.value.rowKey = params.rowKey;
  edit_modal_arr.value.curval = params.value;
  var propRow = params.row;
  var postdata = {
    type_id: propRow.type_id,
    supplier_id: propRow.supplier_id,
    brand_id: propRow.brand_id,
    release_method_type: propRow.release_method_type,
    deliver_date: propRow.deliver_date,
    apply_order_type: propRow.apply_order_type,
    comments: propRow.comments,
    status: propRow.status,
    source: propRow.source
  };
  edit_td_data.value = postdata;
};
</script>

<style scoped lang="scss">
:deep(.merak_modal.xq .el-form .el-form-item__label) {
  justify-content: flex-end;
}

.merak-aside {
  display: flex;
  flex-direction: column;

  .tree-wrapper {
    flex: 1;
    min-height: 0;
  }
}

.el-tree {
  :deep(.el-tree-node.is-checked .el-tree-node__content:has(.is-leaf)) {
    color: #fff !important;
    background-color: var(--el-color-primary) !important;
  }
}

.translation {
  /* display: flex;
			flex-direction: column;
			width: 100%;*/
  height: 100%;
}

.translation_card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .table_main {
    /* display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%; */
    flex: auto;
    min-height: 0;
  }
}

.translationPad {
  padding: 15px;
}

.dian {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50px;
  background-color: #fff;
  margin-right: 6px;
  position: relative;
  top: -2px;
}
.export {
  margin-bottom: var(--merak-space);
  text-align: right;
}
.xq .el-form-item__content {
  color: #303133;
  font-size: 13px;
}

:deep(.el-form-item__label) {
  padding-right: 40px;
}

:deep(.noCurCss.filter .el-scrollbar .el-tree--highlight-current .el-tree-node.is-current .el-tree-node__content) {
  background-color: #fff;
  color: var(--el-tree-text-color);
}

:deep(
    .noCurCss.filter
      .el-scrollbar
      .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content
      .el-tree-node__label,
    .noCurCss.filter
      .el-scrollbar
      .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content
      .el-tree-node__expand-icon
  ) {
  color: var(--el-tree-text-color);
}

:deep(.flx-justify-between.header) {
  display: none;
}

.merak-container-has-aside {
  position: relative;
}
</style>
